<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<div class="container" id="content">
		<section class="content-header">
			<h1>
				<i class="fa fa-child"></i> <strong>网格用户绑定</strong>
			</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
				<li>系统管理</li>
				<li class="active">网格用户绑定</li>
			</ol>
		</section>
		<!-- Main content -->
		<section class="content">
			<div class="box box-info">
				<div class="box-header with-border">
					<i class="fa fa-th-list"></i>
					<h4 class="box-title">网格用户绑定</h4>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">

					<div class="row">
						<div class="col-md-3">
							<div class="box box-info">
								<div class="box-header with-border">
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>区域树信息</strong>
									</h3>
								</div>
								<div class="box-body">
									<ul id="divisionTree" class="ztree"></ul>
								</div>
							</div>
						</div>
						<div class="col-md-7">
							<div class="box box-info">
								<div class="box-header with-border">
									<i class="fa fa-th-list"></i>
									<h4 class="box-title">信息查询</h4>
								</div>
								<div class="box-body">
									<div class="form-inline">
										<div class="input-group">
											<input type="text" id="search1" class="form-control"
												placeholder="search..." style="width: 180px;" /> <span
												class="input-group-btn">
												<button type="button" class="btn btn-info searchBtn1">查询</button>
												<button type="button" name="reset"
													class="btn btn-info resetBtn1">撤消</button>
											</span>
										</div>

									</div>
								</div>
								<div class="box-header">
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>未绑定区域的网格信息</strong>
									</h3>
									<div class="box">
										<table id="gridUnbindDivisionTable"
											class="mytable display table-bordered text-center"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="6%">序号</th>
													<th width="8%"><input type="checkbox"
														id="selectAllUnbindGrid" /></th>
													<th width="8%">网格编码</th>
													<th width="8%">网格名称</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>

									</div>
								</div>
								<div class="box-header with-border">
									<input type="hidden" id="gridAboutD" />
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>已绑定区域的网格信息</strong>
									</h3>
									<div class="box box-info">
										<div class="box-header with-border">
											<i class="fa fa-th-list"></i>
											<h4 class="box-title">信息查询</h4>
										</div>
										<div class="box-body">
											<div class="form-inline">
												<div class="input-group">
													<input type="text" id="search2" class="form-control"
														placeholder="search..." style="width: 180px;" /> <span
														class="input-group-btn">
														<button type="button" class="btn btn-info searchBtn2">查询</button>
														<button type="button" name="reset"
															class="btn btn-info resetBtn2">撤消</button>
													</span>
												</div>

											</div>
										</div>
										<table id="gridBindDivisionTable"
											class="mytable display table-bordered text-center"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="6%">序号</th>
													<th width="8%"><input type="checkbox"
														id="selectAllbindGrid" /></th>
													<th width="8%">网格编码</th>
													<th width="8%">网格名称</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>

									</div>

								</div>

							</div>
						</div>
						<div class="col-md-2"></div>
					</div>


				</div>

				<div class="col-md-6">
					<div class="row">
						<div class="col-md-2"></div>
						<div class="col-md-7">
							<div class="box box-info">

								<div class="box-header with-border">
									<input type="hidden" id="hierarchyId" />
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>未绑定组织的用户信息</strong>
									</h3>
									<div class="box-body">
										<div class="box-header with-border">
											<i class="fa fa-th-list"></i>
											<h4 class="box-title">信息查询</h4>
										</div>
										<div class="box-body">
											<div class="form-inline">
												<div class="input-group">
													<input type="text" id="search3" class="form-control"
														placeholder="search..." style="width: 180px;" /> <span
														class="input-group-btn">
														<button type="button" class="btn btn-info searchBtn3">查询</button>
														<button type="button" name="reset"
															class="btn btn-info resetBtn3">撤消</button>
													</span>
												</div>

											</div>
										</div>
										<table id="userUnbindHierarchyTable"
											class="mytable display table-bordered text-center"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="6%">序号</th>
													<th width="6%"><input type="checkbox"
														id="selectAllUnbindUser" /></th>
													<th width="8%">姓名</th>
													<th width="8%">性别</th>
													<th width="8%">所属组织</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>
									</div>
								</div>
								<div class="box-header with-border">
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>已绑定组织的用户信息</strong>
									</h3>
									<div class="box-body">
										<div class="box-header with-border">
											<i class="fa fa-th-list"></i>
											<h4 class="box-title">信息查询</h4>
										</div>
										<div class="box-body">
											<div class="form-inline">
												<div class="input-group">
													<input type="text" id="search4" class="form-control"
														placeholder="search..." style="width: 180px;" /> <span
														class="input-group-btn">
														<button type="button" class="btn btn-info searchBtn4">查询</button>
														<button type="button" name="reset"
															class="btn btn-info resetBtn4">撤消</button>
													</span>
												</div>

											</div>
										</div>
										<table id="userBindHierarchyTable"
											class="mytable display table-bordered text-center"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="6%">序号</th>
													<th width="6%"><input type="checkbox"
														id="selectAllBindUser" /></th>
													<th width="8%">姓名</th>
													<th width="8%">性别</th>
													<th width="8%">所属组织</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>
									</div>
								</div>

							</div>
						</div>
						<div class="col-md-3">
							<div class="box box-info">
								<div class="box-header with-border">
									<h3 class="box-title">
										<i class="fa fa-cubes "></i><strong>组织树信息</strong>
									</h3>
								</div>
								<div class="box-body">
									<ul id="hierarchyTree" class="ztree"></ul>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- <div class="col-md-2">
					
				</div> -->
			</div>
		</section>

		<div id="progressbar" style="display: none;width: 300px;margin-left: 600px;">
			<div class="progress progress-striped active">
				<div id="prog" class="progress-bar" role="progressbar"
					style="width: 100%">
					<span id="proglabel">正在执行，请稍后......</span>
				</div>
			</div>
		</div>
		<button style="margin-left: 700px;" id="userGridBind"
			class="btn btn-info">绑定</button>
		<button id="userGridUnbind" class="btn btn-danger">解绑</button>

		<script th:src="@{/userGrid/index.js}"></script>
	</div>

</body>
</html>